<template>
  <div class="app-container">
    <div class="topform">
      <el-form ref="QueryForm" :model="QueryForm" @submit.native.prevent>
        <el-form-item label-width="0" style="width: 105px; float: left">
          <el-select clearable v-model="QueryForm.search_type">
            <el-option label="客户姓名" value="1"></el-option>
            <el-option label="客户账号" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" style="width: 130px; float: left; margin-left: 10px">
          <el-input v-model="QueryForm.search_value" clearable autocomplete="off" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label-width="0" style="width: 105px; float: left; margin-left: 10px">
          <el-select clearable v-model="QueryForm.search_type2">
            <el-option label="ID" value="1"></el-option>
            <el-option label="SN" value="2"></el-option>
            <el-option label="机器名称" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" style="width: 130px; float: left; margin-left: 10px">
          <el-input v-model="QueryForm.search_value2" clearable autocomplete="off" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label-width="0" style="width: 105px; float: left; margin-left: 10px">
          <el-select clearable v-model="QueryForm.search_type3">
            <el-option label="生产完成" value="1"></el-option>
            <el-option label="最后质检" value="2"></el-option>
            <el-option label="发货时间" value="3"></el-option>
            <el-option label="质保时间" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" label-width="0" style="width: 400px;float: left ; margin-left: 10px">
          <el-date-picker style="float: left;width: 45%" v-model="QueryForm.search_value3_start" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable type="date">
          </el-date-picker>
          <div style="float: left;margin: 0 5px">至</div>
          <el-date-picker style="float: left;width: 45%" v-model="QueryForm.search_value3_end" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable type="date">
          </el-date-picker>
        </el-form-item>
        <el-form-item label-width="0" style="width: 105px; float: left">
          <el-select clearable v-model="QueryForm.search_type4">
            <el-option label="发货确认差" value="1"></el-option>
            <el-option label="质保确认差" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" style="width: 70px; float: left; margin-left: 10px">
          <el-input-number v-model="QueryForm.search_value4" :controls="false" style="width:70px;" />
        </el-form-item>

        <el-form-item label-width="0" style="width: 105px; float: left; margin-left: 10px">
          <el-select clearable v-model="QueryForm.search_type5" @change="search_type5_change">
            <el-option label="质保状态" value="1"></el-option>
            <el-option label="确认状态" value="2"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label-width="0" style="width: 105px; float: left; margin-left: 10px">
          <el-select clearable v-model="QueryForm.search_value5">
            <el-option v-for="item in search_value5_source" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>


        <div style="float: left">
          <el-button native-type="submit" type="primary" style="margin-left: 20px" icon="el-icon-search" @click="Query(true)">搜索
          </el-button>
          <el-button type="primary" @click="excel(true)">导出</el-button>
        </div>
      </el-form>
    </div>
    <el-table header-cell-class-name="tableheader" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="Loading" :data="list" border element-loading-text="加载中···" highlight-current-row>
      <el-table-column align="center" width="85" label="开始生产">
        <template slot-scope="scope">
          {{ scope.row.repair_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="85" label="生产完成">
        <template slot-scope="scope">
          {{ scope.row.user_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="85" label="质检确认">
        <template slot-scope="scope">
          {{ scope.row.mch_type }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="85" label="发货时间">
        <template slot-scope="scope">
          {{ scope.row.mch_sn }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="85" label="质保时间">
        <template slot-scope="scope">
          {{ scope.row.mch_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="85" label="确认时间">
        <template slot-scope="scope">
          {{ scope.row.mch_assurance_sdt }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" label="发货确认差">
        <template slot-scope="scope">
          {{ scope.row.repair_type }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" label="质保确认差">
        <template slot-scope="scope">
          {{ scope.row.repair_kid_type }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" label="机器名称">
        <template slot-scope="scope">
          {{ scope.row.repair_des }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="SN">
        <template slot-scope="scope">
          {{ scope.row.customer_uname }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="ID">
        <template slot-scope="scope">
          {{ scope.row.customer_repair_handle_result }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" label="机型">
        <template slot-scope="scope">
          <span v-if="scope.row.iswork===0">非生产</span>
          <span v-if="scope.row.iswork===1">生产原因</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="客户账号">
        <template slot-scope="scope">
          {{ scope.row.technology_uname }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="100" label="姓名">
        <template slot-scope="scope">
          {{ scope.row.repair_handle_state_str }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="90" label="专属售后">
        <template slot-scope="scope">
          {{ scope.row.repair_handle_endtime }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="确认状态">
        <template slot-scope="scope">
          {{ scope.row.approval_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="90" label="质保状态">
        <template slot-scope="scope">
          {{ scope.row.repair_approval_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="质保名称">
        <template slot-scope="scope">
          {{ scope.row.express_no }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="所属系统">
        <template slot-scope="scope">
          {{ scope.row.return_state_str }}
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination style="text-align: center" layout="prev, pager, next" small :current-page="QueryForm.page" :page-size="QueryForm.pagesize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script type="es6">
  import Cookies from "js-cookie";
import { Loading } from "element-ui";

export default {
  data() {
    return {
      fanarr: [{
        label: '已返件',
        value: 0
      }, {
        label: '未返件',
        value: 1
      }, {
        label: '无需返件',
        value: 2
      }, {
        label: '无返件',
        value: 3
      }],
      QueryForm: {
        repairtype: [],
        return_state: '',
        return_goods_state: '',
        user_name: '',
        customer_uid: '',
        technology_uid: '',
        mch_type: '',
        mch_sn: '',
        repair_sdt: '',
        repair_edt: '',
        repair_handle_state: '',
        repair_handle_endtime_sdt: '',
        repair_handle_endtime_edt: '',
        mch_assurance_sdt_sdt: '',
        mch_assurance_sdt_edt: '',
        repair_approval_time_sdt: '',
        repair_approval_time_edt: '',
        approval_uid: '',
        apply_state: '',
        return_type: '',
        return_approval_state: '',
        return_sort: '',
        iswork: '',
        search_value5:'',
        isPage: true,
        page: 1,
        pagesize: 10,
      },
      propstype: {
        value: "label",
        label: "label",
        children: "children"
      },
      typedata: [],
      technologys: [],
      customers: [],
      states: [],
      approvals: [],
      list: [],
      search_value5_source:[],
      total: 0,
      Loading: true,
    };
  },
  created() {
    this.Query();
    this.gettype();
    this.getcustomer();
    this.gettechnology();
    this.getstate();
    this.getapproval();
  },
  methods: {
    search_type5_change(value){
      var change_json = [];
       if(value=="1")
       {
          //质保状态
          change_json.push({label:"过保",value:"1"});
             change_json.push({label:"在保",value:"2"});
                change_json.push({label:"未知",value:"3"});
       }
       else if(value =="2")
       {
          //确认状态
           change_json.push({label:"已确认",value:"1"});
             change_json.push({label:"未确认",value:"2"});
       }
       this.search_value5_source = change_json; 
       this.QueryForm.search_value5 ='';
    }, 
    Query(isquery) {
      if (isquery === true) {
        this.QueryForm.page = 1
      }
      this.Loading = true
      this.$post(this.$api + '/repair/get_repair_pagelist_for_excel', {
        return_state: this.QueryForm.return_state,
        return_goods_state: this.QueryForm.return_goods_state,
        repair_type: this.QueryForm.repairtype[0],
        repair_kid_type: this.QueryForm.repairtype[1],
        user_name: this.QueryForm.user_name,
        customer_uid: this.QueryForm.customer_uid,
        technology_uid: this.QueryForm.technology_uid,
        mch_type: this.QueryForm.mch_type,
        mch_sn: this.QueryForm.mch_sn,
        repair_sdt: this.QueryForm.repair_sdt,
        repair_edt: this.QueryForm.repair_edt,
        repair_handle_state: this.QueryForm.repair_handle_state,
        repair_handle_endtime_sdt: this.QueryForm.repair_handle_endtime_sdt,
        repair_handle_endtime_edt: this.QueryForm.repair_handle_endtime_edt,
        mch_assurance_sdt_sdt: this.QueryForm.mch_assurance_sdt_sdt,
        mch_assurance_sdt_edt: this.QueryForm.mch_assurance_sdt_edt,
        repair_approval_time_sdt: this.QueryForm.repair_approval_time_sdt,
        repair_approval_time_edt: this.QueryForm.repair_approval_time_edt,
        approval_uid: this.QueryForm.approval_uid,
        apply_state: this.QueryForm.apply_state,
        return_sort: this.QueryForm.return_sort,
        return_type: this.QueryForm.return_type,
        return_approval_state: this.QueryForm.return_approval_state,
        iswork: this.QueryForm.iswork,
        isPage: this.QueryForm.isPage,
        page: this.QueryForm.page,
        pagesize: this.QueryForm.pagesize,
      })
        .then((res) => {
          this.Loading = false;
          if (res.code === 0) {
            this.list = res.rows;
            this.total = res.total;
            for (var i in this.list) {
              if (this.list[i].repair_time !== null) {
                this.list[i].repair_time = this.list[i].repair_time.substring(0, 10)
              }
              if (this.list[i].mch_assurance_sdt !== null) {
                this.list[i].mch_assurance_sdt = this.list[i].mch_assurance_sdt.substring(0, 10)
              }
              if (this.list[i].repair_handle_endtime !== null) {
                this.list[i].repair_handle_endtime = this.list[i].repair_handle_endtime.substring(0, 10)
              }
              if (this.list[i].repair_approval_time !== null) {
                this.list[i].repair_approval_time = this.list[i].repair_approval_time.substring(0, 10)
              }
              if (this.list[i].approval_time !== null) {
                this.list[i].approval_time = this.list[i].approval_time.substring(0, 10)
              }
            }
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    getapproval() {
      this.$get(this.$api + '/repair/get_customer_userlist', {
        'lv': 'approval'
      })
        .then((res) => {
          if (res.code === 0) {
            this.approvals = res.data;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    gettype() {
      this.$get(this.$api + '/repair/get_type')
        .then((res) => {
          if (res.code === 0) {
            this.typedata = res.data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    gettechnology() {
      this.$get(this.$api + '/repair/get_customer_userlist', {
        'lv': 'technology',
      })
        .then((res) => {
          if (res.code === 0) {
            this.technologys = res.data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    getcustomer() {
      this.$get(this.$api + '/repair/get_customer_userlist', {
        'lv': 'customer',
      })
        .then((res) => {
          if (res.code === 0) {
            this.customers = res.data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    getstate() {
      this.$post(this.$api + '/RK/enum_list', ['repair_handle_state'])
        .then((res) => {
          if (res.code === 0) {
            this.states = res.data[0].data
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    },
    excel() {
      this.$downloadpost(this.$api + '/repair/down_repair_pagelist_for_excel', this.QueryForm, true)
    },
    handleSizeChange(v) {
      this.QueryForm.pagesize = v;
      this.Query();
    },
    handleCurrentChange(v) {
      this.QueryForm.page = v;
      this.Query();
    },
  }
};
</script>